<template>
  <div
    class="item-box"
    draggable="true"
    @dragstart="(event) => dragstart(event, materials)"
    @dragend="dragend"
  >
    <div class="title">
      <span class="text">{{ materials.name }}</span>
    </div>
    <div class="cont">
      <img class="img" :src="materials.picName" />
      <div class="desc">
        {{ materials.description }}
      </div>
    </div>
  </div>
</template>
<script setup>
import editStore from "@/store/editStore.js";
import { getAssetsFile } from "@/utils/index.js";
const store = editStore();
defineProps({
  materials: {
    type: Object,
    default: () => {},
  },
});

const drag_key = "drag_key";
function dragstart(e, item) {
  store.changeDrag(true);
  e.dataTransfer.setData(drag_key, JSON.stringify(item));
}

function dragend() {
  store.changeDrag(false);
}
</script>
<style scoped lang="scss">
.item-box {
  width: 100%;
  overflow: hidden;
  height: 120px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  &:hover {
    cursor: pointer;
  }
  .title {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 10px;
    height: 26px;
    line-height: 26px;
    border-bottom: 1px solid #d9d9d9;
    .text {
      text-align: right;
      width: 100%;
      /* 关键代码 */
      text-overflow: ellipsis; /* 溢出显示省略号 */
      overflow: hidden; /* 溢出隐藏 */
      white-space: nowrap; /* 强制不换行 */
    }
  }
  .cont {
    width: 100%;
    height: calc(100% - 26px);
    padding: 10px;
    display: flex;
    .img {
      width: 55%;
      height: 100%;
      pointer-events: none;
    }
    .desc {
      flex: 1;
      margin-left: 10px;
      word-wrap: normal;
    }
    &:hover {
      transform: scale(1.08);
    }
  }
}
</style>
